@extends('home.parent')
<?php $title = $_ENV['SYSTEM_NAME'];?>
<?php $power = isset(session('user')[0]['power']) ? session('user')[0]['power'] : 0; ?>
@section('title',$title.'后台管理系统')
@section('head_js')
@endsection
@section('head_css')
<style>
  .users-list img{
    min-width:80px;
    min-height:80px;
    max-width:80px;
    max-height:80px;
  }
  .skillstore>li img{
    border-radius:0%;
  }
</style>
@endsection
@section('content')
  @if($power >= 8)
  <div class="content-wrapper" style="min-height: 976px;">
    <section class="content">
      <div class="row">
        <div class="col-md-6">
          <div class="box box-danger">
            <div class="box-header with-border">
              <h3 class="box-title">年收益</h3><br><br>
              <div class="form-group col-md-4">
                <select class="form-control select2"  data-placeholder="选择年份" id="select_year" style="width: 150px;">
                  <option value="2021" selected>2021</option>
                  <option value="2020">2020</option>
                  <option value="2019">2019</option>
                  <option value="2018">2018</option>
                  <option value="2017">2017</option>
                </select>
                <a href="javascript:void(0)" class="btn btn-success" onclick="searchData()" style="margin-left:160px;margin-top:-56px">查询</a>
              </div>
              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div style="position:absolute;">
                <li style='list-style-type:none;'>总计：<span style='color:red'>￥</span><span id='total_amount' style='color:red;'></span></li>
                <li style='list-style-type:none;'>大会门票：<span style='color:#FFD700;'>￥</span><span id='meeting_amount' style='color:#FFD700;'></span></li>
                <li style='list-style-type:none;'>邦币：<span style='color:#f56954;'>￥</span><span id='bangbi_amount' style='color:#f56954;'></span></li>
                <li style='list-style-type:none;'>会员：<span style='color:#00a65a;'>￥</span><span id='vip_amount' style='color:#00a65a;'></span></li>
                <li style='list-style-type:none;'>课程：<span style='color:#f39c12;'>￥</span><span id='course_amount' style='color:#f39c12;'></span></li>
                <li style='list-style-type:none;'>直播间：<span style='color:#00c0ef;'>￥</span><span id='live_course_amount' style='color:#00c0ef;'></span></li>
                <li style='list-style-type:none;'>专栏：<span style='color:#3c8dbc;'>￥</span><span id='column_amount' style='color:#3c8dbc;'></span></li>
                <li style='list-style-type:none;'>线上特训营：<span style='color:#FF00FF;'>￥</span><span id='training_amount' style='color:#FF00FF;'></span></li>
                <li style='list-style-type:none;'>2020中国教育培训行业报告：<span style='color:#000;'>￥</span><span id='report_2020' style='color:#000;'></span></li>
                <li style='list-style-type:none;'>城市合伙人其他活动：<span style='color:#000;'>￥</span><span id='report_2020' style='color:#000;'></span></li>
              </div>
              <div id='bodyContent' style="margin-left:100px;">
                <canvas id="pieChart" style="height: 393px; width: 787px;"></canvas>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
        </div>
      </div>
    </section>
  </div>
  @else
  <div class="content-wrapper" style="background-image:url({{ asset('/images/home2.png').'?v='.env('VERSION') }});background-size:cover;background-repeat:no-repeat;background-position:center;">
      <!--<section class="content-header">
       <h3 style='margin:10% 0 0 5%;width:60%;font-size:28px;font-weight:100;color:#fff;line-height:1.5;letter-spacing:1px;font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;'>We believe that the best way for an organization to stand out is by finding an area of meaningful differentiation and delivering against it — without fail, every day.</h3>  
      </section>-->
  </div>
  @endif
@endsection
@section('foot_js')
@if($power >= 8)
<script src="{{ asset('/js/Chart.min.js') }}"></script>
<script src="{{ asset('/js/fastclick.min.js') }}"></script>
<script src="{{ asset('/js/demo.js') }}"></script>
<script src="{{ asset('/js/tools.js') }}"></script>
<script type="text/javascript">
  $(function(){
    searchData();
  })
  function searchData(){
    $('#bodyContent').html('<canvas id="pieChart" style="height: 393px; width: 787px;"></canvas>');
    var val = yearAmount();
    $('#total_amount').html(val.total_amount);
    $('#meeting_amount').html(val.meeting_amount);
    $('#bangbi_amount').html(val.bangbi_amount);
    $('#vip_amount').html(val.vip_amount);
    $('#course_amount').html(val.course_amount);
    $('#live_course_amount').html(val.live_course_amount);
    $('#column_amount').html(val.column_amount);
    $('#training_amount').html(val.training_amount);
    $('#report_2020').html(val.report_2020);
    pieChartShow(val.list);
  }
  function yearAmount(){
    var res = [];
    var url = "{{ URL('statistics/year/amount') }}";
    var year = $.trim($('#select_year').val());
    var data = {year:year};
    var result = puppet.myajax('post',url,data,false);
    if(result.code == 1){
      puppet.mesFailure(result.msg);
    }else{
      res = result.data;
    }
    return res;
  }
  function pieChartShow(list){
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas);
    var PieData = list;
    var pieOptions = {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke: true,
      //String - The colour of each segment stroke
      segmentStrokeColor: "#fff",
      //Number - The width of each segment stroke
      segmentStrokeWidth: 2,
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout: 50, // This is 0 for Pie charts
      //Number - Amount of animation steps
      animationSteps: 100,
      //String - Animation easing effect
      animationEasing: "easeOutBounce",
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate: true,
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale: false,
      //Boolean - whether to make the chart responsive to window resizing
      responsive: true,
      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio: true,
      //String - A legend template
      legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
    };
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions);
  }
</script>
@endif
@endsection